<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>thumb</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<link rel="stylesheet" href="../styles/uigg.css">

<script src="../js/jquery.min.js"></script>
<script src="../js/uigg.js"></script>
</head>

<body>

<style>
    .table table thead th, .table table thead td {border: 0;background-color: var(--color);color: white;}
    .table table td {width: 20%;padding: 0;}
    i {width: 100%;height: 100%;display: block;}
</style>

<!----------------------------------------------------------------------------------------->
<section class="table">
    <table>
        <thead>
            <tr>
                <th>type</th>
                <td>effect</td>
                <td>function</td>
                <td>color</td>
                <td>background</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th rowspan="0">purity</th>
                <td class="bg-fff"></td>
                <td>var(--fff)</td>
                <td>co-fff</td>
                <td>bg-fff</td>

            </tr>
            <tr><td class="bg-f7"></td><td>var(--f7)</td><td>co-f7</td><td>bg-f7</td></tr>
            <tr><td class="bg-eee"></td><td>var(--eee)</td><td>co-eee</td><td>bg-eee</td></tr>
            <tr><td class="bg-ddd"></td><td>var(--ddd)</td><td>co-ddd</td><td>bg-ddd</td></tr>
            <tr><td class="bg-ccc"></td><td>var(--ccc)</td><td>co-ccc</td><td>bg-ccc</td></tr>
            <tr><td class="bg-bbb"></td><td>var(--bbb)</td><td>co-bbb</td><td>bg-bbb</td></tr>
            <tr><td class="bg-999"></td><td>var(--999)</td><td>co-999</td><td>bg-999</td></tr>
            <tr><td class="bg-666"></td><td>var(--666)</td><td>co-666</td><td>bg-666</td></tr>
            <tr><td class="bg-333"></td><td>var(--333)</td><td>co-333</td><td>bg-333</td></tr>
            <tr><td class="bg-222"></td><td>var(--222)</td><td>co-222</td><td>bg-222</td></tr>
            <tr><td class="bg-111"></td><td>var(--111)</td><td>co-111</td><td>bg-111</td></tr>
            <tr><td class="bg-000"></td><td>var(--000)</td><td>co-000</td><td>bg-000</td></tr>
        </tbody>
        <tbody>
            <tr>
                <th rowspan="0">color</th>
                <td class="bg-brown"></td>
                <td>var(--brown)</td>
                <td>co-brown</td>
                <td>bg-brown</td>

            </tr>
            <tr><td class="bg-red"></td><td>var(--red)</td><td>co-red</td><td>bg-red</td></tr>
            <tr><td class="bg-pink"></td><td>var(--pink)</td><td>co-pink</td><td>bg-pink</td></tr>
            <tr><td class="bg-purple"></td><td>var(--purple)</td><td>co-purple</td><td>bg-purple</td></tr>
            <tr><td class="bg-sapphire"></td><td>var(--sapphire)</td><td>co-sapphire</td><td>bg-sapphire</td></tr>
            <tr><td class="bg-blue"></td><td>var(--blue)</td><td>co-blue</td><td>bg-blue</td></tr>
            <tr><td class="bg-cyan"></td><td>var(--cyan)</td><td>co-cyan</td><td>bg-cyan</td></tr>
            <tr><td class="bg-green"></td><td>var(--green)</td><td>co-green</td><td>bg-green</td></tr>
            <tr><td class="bg-lime"></td><td>var(--lime)</td><td>co-lime</td><td>bg-lime</td></tr>
            <tr><td class="bg-yellow"></td><td>var(--yellow)</td><td>co-yellow</td><td>bg-yellow</td></tr>
            <tr><td class="bg-orange"></td><td>var(--orange)</td><td>co-orange</td><td>bg-orange</td></tr>
            <tr><td class="bg-tomato"></td><td>var(--tomato)</td><td>co-tomato</td><td>bg-tomato</td></tr>
        </tbody>
        <thead>
            <tr>
                <th>type</th>
                <td>effect</td>
                <td>function</td>
                <td>effect</td>
                <td>function</td>
            </tr>
        </thead>
        <tbody>
            <tr><th rowspan="0">transparent</th>
                <td style="background: var(--000-1)"></td><td>var(--000-1)</td>
                <td class="bg-000"><i style="background: var(--fff-1)"></i></td><td>var(--fff-1)</td>
            </tr>
            <tr>
                <td style="background: var(--000-2)"></td><td>var(--000-2)</td>
                <td class="bg-000"><i style="background: var(--fff-2)"></i></td><td>var(--fff-2)</td>
            </tr>
            <tr>
                <td style="background: var(--000-3)"></td><td>var(--000-3)</td>
                <td class="bg-000"><i style="background: var(--fff-3)"></i></td><td>var(--fff-3)</td>
            </tr>
            <tr>
                <td style="background: var(--000-4)"></td><td>var(--000-4)</td>
                <td class="bg-000"><i style="background: var(--fff-4)"></i></td><td>var(--fff-4)</td>
            </tr>
            <tr>
                <td style="background: var(--000-5)"></td><td>var(--000-5)</td>
                <td class="bg-000"><i style="background: var(--fff-5)"></i></td><td>var(--fff-5)</td>
            </tr>
            <tr>
                <td style="background: var(--000-6)"></td><td>var(--000-6)</td>
                <td class="bg-000"><i style="background: var(--fff-6)"></i></td><td>var(--fff-6)</td>
            </tr>
            <tr>
                <td style="background: var(--000-7)"></td><td>var(--000-7)</td>
                <td class="bg-000"><i style="background: var(--fff-7)"></i></td><td>var(--fff-7)</td>
            </tr>
            <tr>
                <td style="background: var(--000-8)"></td><td>var(--000-8)</td>
                <td class="bg-000"><i style="background: var(--fff-8)"></i></td><td>var(--fff-8)</td>
            </tr>
            <tr>
                <td style="background: var(--000-9)"></td><td>var(--000-9)</td>
                <td class="bg-000"><i style="background: var(--fff-9)"></i></td><td>var(--fff-9)</td>
            </tr>
        </tbody>
    </table>
</section>

<!----------------------------------------------------------------------------------------->

</body>
</html>